import React, { Component } from 'react';
import {
	Card, TableContainer, SearchBar, PageTable, ActionButton, Form
} from '@components';
import ModalBox from '../../components/ModalBox';

@Form.create()
export default class extends Component {
	constructor(props) {
		super(props);
		this.state = {
			request: {
				url: '/services/app/v1/follow/list',
				params: {
					moduleCode: '1001',
					current: 1,
					pageSize: 6,
					// userId: '',
				}
			}
		}
	}

	renderTableButton = (text, record, index) => {

		return (
			<div>

				<ActionButton code="020202"
					size="small"
					type="primary"
					border={false}
					ghost>
					编辑
				</ActionButton>
				<ActionButton code="020203"
					size="small"
					type="primary"
					border={false}
					ghost>
					删除
				</ActionButton>
			</div >
		);
	}

	addFormModal = [
		[
			{
				label: '标题',
				field: 'title',
				renderType: 'input',
				placeholder: '请输入标题',
			},
			{
				label: '类型',
				field: 'moduleCode',
				renderType: 'select',
				options: [{
					value: "1001",
					name: "应用"
				},
				{
					value: "1002",
					name: "文章"
				}],
				placeholder: '请选择类型',
				style: { width: '150px' }

			}
		]
	]
	addModal = () => { // 新增modal
		return (
			// <Form>

			// </Form>
			<div>1111111111111</div>
		)
	}
	handleAdd = async () => { // 新增
		let resData = await ModalBox.show(
			this.addModal,
			{ title: '公告管理', footer: null, }
		)
		console.log("resData", resData)

	}

	render() {
		const { request } = this.state
		const { current, pageSize } = request.params;
		const pagination = { current, pageSize };
		const searchBarConfig = [
			[
				{
					label: '公告主题',
					field: 'title',
					renderType: 'input',
					placeholder: '请输入标题',
					style: { width: '200px' },

				},
				{
					label: '排序',
					field: 'moduleCode',
					renderType: 'select',
					placeholder: '按照创建时间降序',
					style: { width: '200px' },
					options: [{
						value: "1001",
						name: "按照创建时间降序"
					},
					{
						value: "1002",
						name: "按照创建时间降序"
					}],


				}
			],

		]

		const columns = [
			{
				title: '序号',
				dataIndex: 'key',
				// width: '30%',
				align: "center",
				// render: text => <a href="javascript:;">{text}</a>,
			},
			{
				title: '公告主题',
				dataIndex: 'theme',
			},
			{
				title: '创建人',
				dataIndex: 'createUserId',
			},
			{
				title: '创建时间',
				dataIndex: 'createTime',
			},
			{
				title: '操作',
				dataIndex: 'operation',
				// width: '24%',
				render: (text, record, index) => this.renderTableButton(text, record, index)
			}
		]

		const dataSource = [{
			key: '1',
			theme: '胡彦斌',
			createUserId: 1000,
			createTime: '20180223'
		}, {
			key: '2',
			theme: '数据库化是国家的话',
			createUserId: 1001,
			createTime: '20180223'
		}];

		return (
			<div>
				<Card title="公告管理">
					<ActionButton actionCode="020201"
						onClick={this.handleAdd}>
						新增
					</ActionButton>

					<TableContainer>
						<SearchBar
							isReset
							searchBarConfig={searchBarConfig}
							footerStyle={{ textAlign: 'right' }}
						/>

						<PageTable
							bordered
							size="middle"
							// request={request}
							dataSource={dataSource}
							columns={columns}
							pagination={pagination}
							onChange={this.changeTable}
							style={{ marginTop: '10px' }}
						/>
					</TableContainer>
				</Card>
			</div>
		)
	}
}